<template>
  <div class="detail-body">
    <el-dialog
      v-loading.fullscreen.lock="isloading"
      :visible="dialogVisible"
      width="80%"
      :before-close="handleClose"
    >
      <el-card class="main">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <el-form v-model="xyUser" label-width="150px">
          <el-row :gutter="10">
            <el-form-item label="姓名：">
              <el-col :span="10">
                <el-input v-model="xyUser.name" placeholder="姓名"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="性别：">
              <el-col :span="6" class="sex">
                <el-radio v-model="xyUser.sex" label="0">男</el-radio>
                <el-radio v-model="xyUser.sex" label="1">女</el-radio>
              </el-col>
            </el-form-item>

            <el-form-item label="身份证号：">
              <el-col :span="10">
                <el-input v-model="xyUser.manID" placeholder="请输入身份证号"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="电话号码：">
              <el-col :span="10">
                <el-input v-model="xyUser.tel" placeholder="请输入电话号码"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="班级：">
              <el-col :span="8">
                <el-select v-model="xyUser.classId" placeholder="请选择班级">
                  <el-option
                    v-for="item in  classList"
                    :key="item.id"
                    :label="item.className"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-col>
            </el-form-item>

            <el-form-item label="宿舍：">
              <el-col :span="8">
                <el-select v-model="xyUser.dormId" placeholder="请选择宿舍">
                  <el-option
                    v-for="item in dormList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-col>
            </el-form-item>

            <el-form-item label="起止时间：">
              <el-col :span="8">
                <div class="block">
                  <el-date-picker
                    v-model="xyUser.startTOend"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="入学日期"
                    end-placeholder="毕业日期"
                  ></el-date-picker>
                </div>
              </el-col>
            </el-form-item>

            <el-form-item label="地址：">
              <el-col :span="10">
                <el-cascader
                  style="width:250px"
                  size="large"
                  :options="options"
                  v-model="xyUser.city"
                  @change="handleChange"
                ></el-cascader>
              </el-col>
            </el-form-item>
          </el-row>
        </el-form>
      </el-card>

      <el-card class="main">
        <div slot="header" class="clearfix">
          <span>补充信息</span>
        </div>

        <el-form ref="form" :model="tempCostData" label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="缴费种类：">
                <el-radio v-model="tempCostData.costType" label="0">学费</el-radio>
                <el-radio v-model="tempCostData.costType" label="1">住宿费</el-radio>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="金额：">
                <el-input v-model="tempCostData.costValue" placeholder="请输入金额"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="缴费时间：">
                <el-date-picker value-format="yyyy-MM-dd" v-model="tempCostData.costTime" type="date" placeholder="选择日期"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-form-item label="备注：">
              <el-col :span="20">
                <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="tempCostData.costBak"></el-input>
              
              </el-col>
            </el-form-item>
          </el-row>
          <el-row :gutter='100'>
            <el-col :span='10' >
              <el-button type="primary" @click='doCostSave'>保 存</el-button>
              <el-button @click='doCostReset'>重 置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <el-card class="main">
        <div slot="header" class="clearfix">
          <span>缴费记录</span>
        </div>
        <el-table :data="CostData" height="250" border style="width: 100%" >
          <el-table-column prop="costType" label="种类" width="180" header-align="center"  align="center">
            <template slot-scope="scope">
                <span>{{ scope.row.costType == '0'?'学费':'住宿费' }}</span>
              </template>
          </el-table-column>
          <el-table-column prop="costValue" label="金额" width="180" header-align="center"  align="center"></el-table-column>
          <el-table-column prop="costTime" label="时间" header-align="center"  align="center"></el-table-column>
          <el-table-column prop="costBak" label="备注" header-align="center"  align="center"></el-table-column>

          <el-table-column label="编 辑" header-align="center"  align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.tempId" @click='delCost(scope.row.tempId)' type="primary" size="small" style="margin-left:60px">删 除</el-button>
              <span v-else>缴费已完成</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="doSave">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import doinfoSave from "@/api/studentManager/doSave";
import doinfoEdit from "@/api/studentManager/doEdit";

import cost from "@/api/costManager/costManager";
// 地址选择器数据,通过CodeToTex对地区码进行反编译
import { regionData, CodeToText } from "element-china-area-data";

export default {
  props: ["classList", "dormList"],
  data() {
    return {
      // 地址选择器数据
      options: regionData,
      dialogVisible: false,
      isloading: false,
      xyUser: {
        sex: "0"
      },
      cost: {},
      // 临时变量，推入CostData后包装一下用于axios请求
      tempCostData:{
        costType:'0'
      },
      CostData:[],
      hisCostData:[]
    };
  },
  methods: {
    // 城市选择方法
    handleChange(value) {
     
    },
    openDialog() {
      this.dialogVisible = true;
      this.isloading = true;
    },
    handleClose() {
      this.dialogVisible = false;
      this.xyUser = this.$options.data().xyUser;
    },
    doSave() {
      var temp = "";
      this.isloading = true;
      // 警告
      if (!this.xyUser.name) {
        temp = "你叫什么名字呢？";
      } else if (!this.xyUser.tel) {
        temp = "你的电话号码是多少呢？怎么联系你呢？";
      } else if (!this.xyUser.classId) {
        temp = "如果不选择班级，该怎么找到你呢";
      } else if (!this.xyUser.dormId) {
        temp = "选择宿舍，选择你的五排队友";
      } else if (!this.xyUser.startTOend) {
        temp = "啥时候入宿，啥时候离开";
      } else if (!this.xyUser.city) {
        temp = "请选择你所在城市，方便投食打击";
      }
      if (temp) {
        this.$message({
          message: temp,
          type: "warning"
        });
        return;
      }

      // 对对象内容做最后包装，准备发送后台
      // 新建和修改的数据做兼容处理，防止报错堵塞程序
      try {
        this.xyUser.cityText = [];
        for (var i in this.xyUser.city) {
          this.xyUser.cityText[i] = CodeToText[this.xyUser.city[i]];
        }
        this.xyUser.cityText = this.xyUser.cityText.join(",");
        this.xyUser.city = this.xyUser.city.join(",");
      } catch (err) {
        console.log(err);
      }
      try {
        this.xyUser.dormStartTime = this.xyUser.startTOend[0];
        this.xyUser.dormEndTime = this.xyUser.startTOend[1];
      } catch (err) {
        console.log(err);
      }
 
      var params={}
      params.xyUser=this.xyUser
      // 强语言类型？
      params._size=String(this.CostData.length)
       for(var i in this.CostData){
          params["xyCostItems_"+i]=this.CostData[i]
          delete params["xyCostItems_"+i].tempId
       }
      var api = "";
      if(this.xyUser.id) {
        api = doinfoEdit;
        this.xyUser.lassId = this.xyUser.classId;
      } else {
        api = doinfoSave;
      }
      // return

      api(params)
        .then(res => {
          this.xyUser = this.$options.data().xyUser;
          this.$emit("getStudentList");
          this.isloading = false;
          this.dialogVisible = false;
          this.doCostReset()
          this.CostData={}
        })
        .catch(res => {
          this.$message({
            message: "网络开小差啦，请请稍后重试",
            type: "warning"
          });
        });
    },
    //拿交费详情，这个操作在父级组件点击编辑的时候，向后台发送请求
    //将数据赋给CostData，这里存着历史缴费记录和未来的临时的数据
    getCost(id) {
      cost({
        userId: id
      }).then(res => {
        this.CostData=res.data.data.list
      });
    },
    // 对临时的交费记录进行保存
    doCostSave(){
      // 深克隆，否则引用数据类型会有牵连变化
      var temp=JSON.parse(JSON.stringify(this.tempCostData))
    //  唯一标示，用这个标示去判断是否为已经完成的缴费
     temp.tempId=new Date().getTime()
      // this.CostData在点击查询的时候已经初始了
      // 保存的是历史缴费记录
      // 然后将临时记录保存进去
      // 为了保证它呈一定的顺序，所以采用unshift方法
      this.CostData.unshift(temp)
      // 推完之后将表单清空（还原成初始样式）
      this.doCostReset()
    },
    // 对临时列表数据进行还原
    doCostReset(){
      this.tempCostData=this.$options.data().tempCostData
    },
    // 删除临时缴费记录
    delCost(id){
      for(var i in this.CostData){
        if(id==this.CostData[i].id){
            this.CostData.splice(i,1)
            break;
        }
      }
    }
  },
  created() {
    // this.getClassList()
  }
};
</script>

<style lang="scss" scoped>
.main {
  margin: 15px;
  padding: 0;
}
.clearfix {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
}
.sex {
  margin-left: 50px;
}
.cost {
  margin: 0;
}
.test {
  background: red;
}
.test01 {
  background: blue;
}
</style>